<template>
<div>
  <el-dialog
      title="请选择合同模板"
      :visible.sync="withTemplate"
      width="30%"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :show-close="false"
  >
    <el-row style="padding-bottom: 10px" v-for="(template, index) in templateList" :key="index">
      <el-button type="primary" @click="selectTemplate(template)" plain>{{template.TABLE_COMMENT}}</el-button>
    </el-row>
  </el-dialog>
    <Card>
        <div slot="title">
            <div class="edit-head">
                <a @click="close" class="back-title">
                    <Icon type="ios-arrow-back" />返回
                </a>
                <div class="head-name">添加企业合同</div>
                <span></span>
                <a @click="close" class="window-close">
                    <Icon type="ios-close" size="31" class="ivu-icon-ios-close" />
                </a>
            </div>
        </div>
        <Form ref="form" :model="form" :label-width="100" :rules="formValidate" label-position="left">
            <FormItem label="合同标题" prop="title">
                <Input v-model="form.title" clearable maxlength="240" show-word-limit placeholder="请输入合同标题..." style="width:570px" />
            </FormItem>
            <FormItem label="甲方" prop="firstParty">
                <Input v-model="form.firstParty" clearable maxlength="240" show-word-limit placeholder="请输入合同甲方..." style="width:570px" />
            </FormItem>
            <FormItem label="乙方" prop="secondParty">
                <Input v-model="form.secondParty" clearable maxlength="240" show-word-limit placeholder="请输入合同乙方..." style="width:570px" />
            </FormItem>
            <FormItem label="到期日期" prop="date">
                <DatePicker type="date" placeholder="请选择合同到期日期..." format="yyyy-MM-dd" @on-change="changeDate" style="width: 570px"></DatePicker>
            </FormItem>
<!--            <FormItem label="合同原文件" prop="file1">-->
<!--                <upload-file-input v-model="form.file1" placeholder="请上传合同原文件..." accept=".pdf" style="width:570px"></upload-file-input>-->
<!--            </FormItem>-->
            <Form ref="templateForm" :model="templateForm" :label-width="100" label-position="left" :rules="templateValidate">
                <FormItem v-for="(field, index) in columnList" :key="index" v-if="field.COLUMN_NAME !== 'id' && field.COLUMN_NAME !== 'agreement_id'" :label="field.COLUMN_COMMENT">
                    <Input v-model="templateForm[field.COLUMN_NAME]" clearable maxlength="240" show-word-limit placeholder="请输入" style="width:570px" />
                </FormItem>
            </Form>
            <Form-item class="br">
                <Button @click="handleSubmit" :loading="submitLoading" type="primary">提交并保存</Button>
                <Button @click="handleReset">重置</Button>
                <Button type="dashed" @click="close">关闭</Button>
            </Form-item>
        </Form>
    </Card>
</div>
</template>

<script>
import {
    addAgreement,
    fetchTemplate
} from "./api.js";
import uploadFileInput from "@/views/template/upload-file-input";
export default {
    name: "add",
    props:['withTemplate'],
    components: {
        uploadFileInput
    },
    data() {
        return {
            tableName: undefined,
            submitLoading: false, // 表单提交状态
            form: { // 添加或编辑表单对象初始化数据
                title: "",
                firstParty: "",
                secondParty: "",
                file1: "",
                auditStatus: "",
                auditUser: "",
                auditTime: "",
                signStatus: "",
                file2: "",
                signTime: "",
                date: "",
                signId: "",
                signUser: "",
            },
            columnList: [],
            templateForm: {},
            // 表单验证规则
            formValidate: {
              title: [
                { required: true, message: '合同标题不能为空', trigger: 'blur' },
                { max: 240, message: '合同标题长度不能超过240个字符', trigger: 'blur' }
              ],
              firstParty: [
                { required: true, message: '甲方不能为空', trigger: 'blur' },
                { max: 240, message: '甲方名称长度不能超过240个字符', trigger: 'blur' }
              ],
              secondParty: [
                { required: true, message: '乙方不能为空', trigger: 'blur' },
                { max: 240, message: '乙方名称长度不能超过240个字符', trigger: 'blur' }
              ],
              date: [
                { required: true, message: '合同到期日期不能为空', trigger: 'change' }
              ],
              file1: [
                { required: true, message: '请上传合同原文件', trigger: 'change' }
              ]
            },
            templateValidate: {

            },
            templateList: []
        };
    },
    methods: {
        init() {},
        changeDate(e) {
            this.form.date = e;
        },
        handleReset() {
            this.$refs.form.resetFields();
        },
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.tableName) {
                      this.form.template = {
                        tableName: this.tableName,
                        fields: { ...this.templateForm } // 将 templateForm 的内容作为 fields
                      };
                    }

                    addAgreement(this.form).then(res => {
                        this.submitLoading = false;
                        if (res.success) {
                            this.$Message.success("操作成功");
                            this.submited();
                        }
                    });
                }
            });
        },
        close() {
            this.$emit("close", true);
        },
        submited() {
            this.$emit("submited", true);
        },
        selectTemplate(template) {
          this.columnList = template.FIELDS;
          this.tableName = template.TABLE_NAME;
          this.withTemplate = false;
        }
    },
    mounted() {
      if (this.withTemplate) {
        fetchTemplate().then(res => {
          this.templateList = res.result;
        })
      }
      this.init();
    },

};
</script>

<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/single-common.less";
.edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

    .back-title {
        color: #515a6e;
        display: flex;
        align-items: center;
    }

    .head-name {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        color: #17233d;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .window-close {
        z-index: 1;
        font-size: 12px;
        position: absolute;
        right: 0px;
        top: -5px;
        overflow: hidden;
        cursor: pointer;

        .ivu-icon-ios-close {
            color: #999;
            transition: color .2s ease;
        }
    }

    .window-close .ivu-icon-ios-close:hover {
        color: #444;
    }
}
</style>
